<template>
    <div>
        <div class="head">
            <el-form inline :model="selectdata"
                     label-width="150px"
                     size="small"
            >


                <el-form-item>
                    <el-input v-model="selectdata.nickname" @keyup.enter.native="search"
                              placeholder="请输入昵称">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-button icon="el-icon-delete" type="danger" @click="clearForm">重置</el-button>
                    <el-button plain type="primary" @click="search" icon="el-icon-search">搜索</el-button>
                </el-form-item>
            </el-form>

            <div>
                <el-button
                        size="small"
                        type="primary"
                        icon="el-icon-plus"
                        class="startupchart-btn right"
                        plain
                        @click="openAddDialog">新增
                </el-button>
            </div>


        </div>


        <div>
            <!-- 表 -->
            <el-table :data="tableData" border v-loading="loading">
                <el-table-column label="ID" align="center">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>


                <el-table-column label="名称" align="center">
                    <template slot-scope="scope">{{ scope.row.name }}</template>
                </el-table-column>

                <el-table-column label="图片地址" align="center" prop="avatar">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.imgUrl" v-if="scope.row.imgUrl" class="img-wrap"
                                  style="height: 50px;width: 100%"
                                  :preview-src-list="scope.row.imgUrl |toArray"></el-image>
                    </template>
                </el-table-column>


                <el-table-column label="跳转地址" align="center">
                    <template slot-scope="scope">{{ scope.row.skipUrl }}</template>
                </el-table-column>

                <el-table-column label="排序" align="center">
                    <template slot-scope="scope">{{ scope.row.sort }}</template>
                </el-table-column>


                <el-table-column label="状态" align="center">
                    <template slot-scope="scope">
            <span v-if="scope.row.deleted===0" style="color: green">
              正常
            </span>
                        <span v-if="scope.row.deleted===1">
              删除
            </span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button plain size="mini" type="warning"
                                   @click="delete_data(scope.row.id)">删除
                        </el-button>
                    </template>
                </el-table-column>


            </el-table>
            <div class="page">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                               layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
            </div>
        </div>

        <el-dialog :visible.sync="dialogVisible" width="30%"
                   :before-close="handleClose" center="">
            <div align="center" class="member-title"
                 style="">
                广告位新增
            </div>
            <el-form :model="form" style="margin-top: 30px" class="add-form-member">
                <el-form-item label="广告名称" label-width="70px">
                    <el-input v-model="form.name" placeholder="输入广告名称"></el-input>
                </el-form-item>

                <el-form-item label="跳转地址" prop="skipUrl" label-width="70px">
                    <el-input v-model="form.skipUrl" placeholder="输入跳转地址"></el-input>
                </el-form-item>


                <el-form-item label="排序" label-width="70px">
                    <el-input v-model="form.sort" placeholder="输入序号"></el-input>
                </el-form-item>


                <el-form-item label="状态" style="margin-left: 30px">
                    <el-select v-model="form.deleted" placeholder="请选择状态">
                        <el-option label="在线" value="0"></el-option>
                        <el-option label="下线" value="1"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="图片" style="margin-left: 30px;">
                    <el-upload
                            :action="action"
                            list-type="picture-card"
                            :before-upload='beforeAvatarUpload'
                            :on-success='handleAvatarSuccess'
                            :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible1">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="saveData">确 定</el-button>
                    </span>
        </el-dialog>

    </div>
</template>

<script>
    import moment from 'moment'
    import {sys_banner_list, add, update, detail, delete_row} from "../../api/sys_banner";
    import {upload_img} from "../../api/upload";

    import switchEnv from '../../utils/global'

    export default {
        name: "sys_user",

        data() {
            return {
                currentPage: 1,
                pageSize: 10,
                total: 0,
                tableData: [],
                dateRange: [],
                loading: false,
                dialogVisible: false,
                dialogImageUrl: '',
                dialogVisible1: false,
                form: {
                    imgUrl: ""
                },
                action: "",
                formInline: {},
                imageUrl: "",
                selectdata: {
                    userId: "",
                    nickname: "",

                }
            };
        },
        created() {
            this.getData();
            this.get_img_upload();
        },
        methods: {
            /**
             * 重置搜索
             */
            clearForm() {
                this.selectdata = {};
                this.getData();
            },
            get_img_upload() {
                let url_domain = (switchEnv().BASE_API);
                let upload_url = '/upload/img';
                console.log(url_domain + upload_url);
                this.action = url_domain + upload_url;
            },

            handleClose() {

            },

            delete_data(id) {
                let params = {};
                params.id = id;
                delete_row(params).then(res => {
                    if (res.status === 200) {
                        this.$message.success("删除成功");
                        this.getData();

                    }
                })
            },

            saveData() {
                let params = {};
                params.name = this.form.name;
                params.skipUrl = this.form.skipUrl;
                params.imgUrl = this.form.imgUrl;
                params.sort = this.form.sort;
                params.deleted = this.form.deleted;

                add(params).then(res => {
                    if (res.status === 200) {
                        this.$message.success("保存成功");
                        this.dialogVisible = false;
                        this.getData();
                    }
                })
            },

            openAddDialog() {
                this.dialogVisible = true;
                this.form = {};
            },

            handleRemove(file, fileList) {
                console.log(file, fileList);
            },

            handleAvatarSuccess(res) {
                console.log(res);
                if (res.status === 200) {
                    this.form.imgUrl = res.data;
                }
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === "image/jpeg" || file.type === "image/png";
                const isLt2M = file.size / 1024 / 1024 < 3;
                if (!isJPG) {
                    this.$message.error("上传图片只能是 JPG 和 Png 格式!");
                    return false;
                }
                if (!isLt2M) {
                    this.$message.error("上传图片大小不能超过 3MB!");
                    return false;
                }
            },

            /**
             * 搜索
             */
            search() {
                this.currentPage = 1;
                this.getData()
            },


            /**
             * 获取数据
             */
            getData() {
                let params = {};
                this.loading = true;
                params.userId = this.selectdata.userId;
                params.nickname = this.selectdata.nickname;
                params.pageSize = this.pageSize;
                params.pageNumber = this.currentPage;
                sys_banner_list(params).then(res => {
                    if (res.status === 200) {
                        this.loading = false;
                        this.total = Number.parseInt(res.data.total);
                        this.tableData = res.data.list;
                    }

                })
            },
            /**
             * 改变每页大小
             */
            handleSizeChange(e) {
                this.pageSize = e;
                this.getData();
            },

            /**
             * 改变当前页
             */
            handleCurrentChange(e) {
                this.currentPage = e;
                this.getData();
            },
        },
        filters: {
            filterCtime(ctime) {
                // 过滤时间
                if (ctime) {
                    return moment(ctime).format("YYYY-MM-DD HH:mm:ss");
                } else {
                    return '暂无数据'
                }
            },
            filterShow(show) {
                if (show === 1) {
                    return '显示'
                } else {
                    return '不显示'
                }
            }
        }
    }
</script>

<style scoped>

</style>
